<template>
    <el-container class="home-container">
        <!-- 顶部导航栏 -->
        <el-header class="header">
            <div class="header-content">
                <div class="logo">
                    <el-icon class="logo-icon"><Reading /></el-icon>
                    <h2>数字图书馆</h2>
                </div>
                
                <div class="search-section">
                    <el-input
                        v-model="searchKeyword"
                        placeholder="搜索图书、作者或分类..."
                        class="search-input"
                        clearable
                        @keyup.enter="handleSearch"
                    >
                        <template #prefix>
                            <el-icon><Search /></el-icon>
                        </template>
                        <template #append>
                            <el-button type="primary" @click="handleSearch">搜索</el-button>
                        </template>
                    </el-input>
                </div>

                <div class="user-section">
                    <el-button type="primary" @click="loginDialogVisible = true" v-if="!isLoggedIn">
                        <el-icon><User /></el-icon>
                        登录
                    </el-button>
                    <el-dropdown v-else @command="handleUserCommand">
                        <el-avatar :src="userAvatar" class="user-avatar" />
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="profile">个人中心</el-dropdown-item>
                                <el-dropdown-item command="favorites">我的收藏</el-dropdown-item>
                                <el-dropdown-item command="history">阅读历史</el-dropdown-item>
                                <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>
        </el-header>

        <!-- 主要内容区域 -->
        <el-main class="main-content">
            <!-- 分类导航 -->
            <el-row class="category-section">
                <el-col :span="24">
                    <el-card class="category-card">
                        <template #header>
                            <div class="card-header">
                                <span>图书分类</span>
                                <el-button type="text" @click="showAllCategories">查看全部</el-button>
                            </div>
                        </template>
                        <el-row :gutter="20">
                            <el-col :span="4" v-for="category in categories" :key="category.id">
                                <el-card 
                                    class="category-item" 
                                    shadow="hover"
                                    @click="selectCategory(category)"
                                >
                                    <el-icon class="category-icon" :class="category.iconClass">
                                        <component :is="category.icon" />
                                    </el-icon>
                                    <div class="category-name">{{ category.name }}</div>
                                    <div class="category-count">{{ category.count }}本</div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
            </el-row>

            <!-- 推荐图书 -->
            <el-row class="recommend-section">
                <el-col :span="24">
                    <el-card class="recommend-card">
                        <template #header>
                            <div class="card-header">
                                <span>推荐图书</span>
                                <el-button type="text" @click="refreshRecommend">换一换</el-button>
                            </div>
                        </template>
                        <el-row :gutter="20">
                            <el-col :span="6" v-for="book in recommendBooks" :key="book.id">
                                <el-card 
                                    class="book-card" 
                                    shadow="hover"
                                    @click="viewBook(book)"
                                >
                                    <img :src="book.cover" class="book-cover" />
                                    <div class="book-info">
                                        <h4 class="book-title">{{ book.title }}</h4>
                                        <p class="book-author">{{ book.author }}</p>
                                        <div class="book-rating">
                                            <el-rate 
                                                v-model="book.rating" 
                                                disabled 
                                                show-score 
                                                text-color="#ff9900"
                                                score-template="{value}"
                                            />
                                        </div>
                                        <el-tag size="small" :type="book.status === '可借' ? 'success' : 'danger'">
                                            {{ book.status }}
                                        </el-tag>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
            </el-row>

            <!-- 最新图书 -->
            <el-row class="latest-section">
                <el-col :span="24">
                    <el-card class="latest-card">
                        <template #header>
                            <div class="card-header">
                                <span>最新上架</span>
                                <el-button type="text" @click="viewMoreLatest">更多</el-button>
                            </div>
                        </template>
                        <el-table :data="latestBooks" style="width: 100%" @row-click="viewBook">
                            <el-table-column prop="title" label="书名" width="300">
                                <template #default="scope">
                                    <div class="book-title-cell">
                                        <img :src="scope.row.cover" class="book-cover-small" />
                                        <span>{{ scope.row.title }}</span>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="author" label="作者" width="150" />
                            <el-table-column prop="category" label="分类" width="100" />
                            <el-table-column prop="publishDate" label="出版日期" width="120" />
                            <el-table-column prop="status" label="状态" width="80">
                                <template #default="scope">
                                    <el-tag :type="scope.row.status === '可借' ? 'success' : 'danger'">
                                        {{ scope.row.status }}
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="120">
                                <template #default="scope">
                                    <el-button size="small" @click.stop="borrowBook(scope.row)">借阅</el-button>
                                    <el-button size="small" type="text" @click.stop="addToFavorites(scope.row)">
                                        <el-icon><Star /></el-icon>
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>
                </el-col>
            </el-row>
        </el-main>

        <!-- 登录弹窗 -->
        <el-dialog 
            v-model="loginDialogVisible" 
            title="用户登录" 
            width="400px" 
            center
            :close-on-click-modal="false"
        >
            <el-form 
                :model="loginForm" 
                :rules="loginRules"
                ref="loginFormRef"
                label-width="80px"
            >
                <el-form-item label="用户名" prop="username">
                    <el-input 
                        v-model="loginForm.username" 
                        placeholder="请输入用户名"
                        prefix-icon="User"
                    />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input 
                        v-model="loginForm.password" 
                        type="password" 
                        placeholder="请输入密码" 
                        show-password
                        prefix-icon="Lock"
                    />
                </el-form-item>
                <el-form-item>
                    <el-checkbox v-model="rememberMe">记住我</el-checkbox>
                    <el-link type="primary" style="float: right;">忘记密码？</el-link>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="loginDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleLogin" :loading="loginLoading">
                        登录
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </el-container>
</template>

<script>
import { 
    Search, 
    User, 
    Reading, 
    Star,
    Collection,
    Document,
    Histogram,
    DataAnalysis,
    Monitor,
    Connection
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
    name: 'HomePage',
    components: {
        Search,
        User,
        Reading,
        Star,
        Collection,
        Document,
        Histogram,
        DataAnalysis,
        Monitor,
        Connection
    },
    data() {
        return {
            // 搜索相关
            searchKeyword: '',
            
            // 登录相关
            loginDialogVisible: false,
            loginLoading: false,
            isLoggedIn: false,
            rememberMe: false,
            userAvatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
            
            // 登录表单
            loginForm: {
                username: '',
                password: ''
            },
            
            // 表单验证规则
            loginRules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
                ]
            },

            // 图书分类
            categories: [
                { id: 1, name: '文学小说', count: 1250, icon: 'Document', iconClass: 'literature' },
                { id: 2, name: '科技技术', count: 890, icon: 'Monitor', iconClass: 'tech' },
                { id: 3, name: '历史传记', count: 650, icon: 'Histogram', iconClass: 'history' },
                { id: 4, name: '艺术设计', count: 420, icon: 'Collection', iconClass: 'art' },
                { id: 5, name: '经济管理', count: 780, icon: 'DataAnalysis', iconClass: 'business' },
                { id: 6, name: '哲学宗教', count: 320, icon: 'Connection', iconClass: 'philosophy' }
            ],

            // 推荐图书
            recommendBooks: [
                {
                    id: 1,
                    title: '三体',
                    author: '刘慈欣',
                    cover: 'https://img3.doubanio.com/view/subject/l/public/s2768378.jpg',
                    rating: 4.8,
                    status: '可借'
                },
                {
                    id: 2,
                    title: '百年孤独',
                    author: '加西亚·马尔克斯',
                    cover: 'https://img2.doubanio.com/view/subject/l/public/s6384944.jpg',
                    rating: 4.7,
                    status: '可借'
                },
                {
                    id: 3,
                    title: '活着',
                    author: '余华',
                    cover: 'https://img1.doubanio.com/view/subject/l/public/s29053580.jpg',
                    rating: 4.9,
                    status: '借出'
                },
                {
                    id: 4,
                    title: '1984',
                    author: '乔治·奥威尔',
                    cover: 'https://img2.doubanio.com/view/subject/l/public/s4371408.jpg',
                    rating: 4.6,
                    status: '可借'
                }
            ],

            // 最新图书
            latestBooks: [
                {
                    id: 1,
                    title: '人类简史',
                    author: '尤瓦尔·赫拉利',
                    cover: 'https://img3.doubanio.com/view/subject/l/public/s27814883.jpg',
                    category: '历史',
                    publishDate: '2024-01-15',
                    status: '可借'
                },
                {
                    id: 2,
                    title: '算法导论',
                    author: 'Thomas H.Cormen',
                    cover: 'https://img1.doubanio.com/view/subject/l/public/s1959967.jpg',
                    category: '科技',
                    publishDate: '2024-01-10',
                    status: '可借'
                },
                {
                    id: 3,
                    title: '设计心理学',
                    author: '唐纳德·A·诺曼',
                    cover: 'https://img2.doubanio.com/view/subject/l/public/s27237850.jpg',
                    category: '设计',
                    publishDate: '2024-01-08',
                    status: '借出'
                },
                {
                    id: 4,
                    title: '时间简史',
                    author: '史蒂芬·霍金',
                    cover: 'https://img1.doubanio.com/view/subject/l/public/s1914861.jpg',
                    category: '科学',
                    publishDate: '2024-01-05',
                    status: '可借'
                }
            ]
        }
    },
    methods: {
        // 搜索处理
        handleSearch() {
            if (!this.searchKeyword.trim()) {
                ElMessage.warning('请输入搜索关键词')
                return
            }
            ElMessage.success(`搜索: ${this.searchKeyword}`)
            // 这里可以添加实际的搜索逻辑
        },

        // 用户相关操作
        handleUserCommand(command) {
            switch (command) {
                case 'profile':
                    ElMessage.info('跳转到个人中心')
                    break
                case 'favorites':
                    ElMessage.info('跳转到我的收藏')
                    break
                case 'history':
                    ElMessage.info('跳转到阅读历史')
                    break
                case 'logout':
                    this.handleLogout()
                    break
            }
        },

        // 退出登录
        handleLogout() {
            ElMessageBox.confirm('确定要退出登录吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.isLoggedIn = false
                ElMessage.success('已退出登录')
            })
        },

        // 登录处理
        async handleLogin() {
            try {
                await this.$refs.loginFormRef.validate()
                this.loginLoading = true
                
                // 模拟登录请求
                setTimeout(() => {
                    this.isLoggedIn = true
                    this.loginDialogVisible = false
                    this.loginLoading = false
                    ElMessage.success('登录成功！')
                }, 1000)
            } catch (error) {
                this.loginLoading = false
                ElMessage.error('请检查输入信息')
            }
        },

        // 分类相关
        selectCategory(category) {
            ElMessage.info(`选择了分类: ${category.name}`)
            // 这里可以跳转到分类页面
        },

        showAllCategories() {
            ElMessage.info('查看全部分类')
        },

        // 推荐图书相关
        refreshRecommend() {
            ElMessage.success('已刷新推荐')
            // 这里可以重新获取推荐图书
        },

            // 图书相关操作
    viewBook(book) {
      this.$router.push({
        name: 'BookDetailPage',
        params: { bookId: book.id }
      })
    },

        borrowBook(book) {
            if (book.status === '借出') {
                ElMessage.warning('该图书已被借出')
                return
            }
            ElMessageBox.confirm(`确定要借阅《${book.title}》吗？`, '借阅确认', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'info'
            }).then(() => {
                book.status = '借出'
                ElMessage.success('借阅成功！')
            })
        },

        addToFavorites(book) {
            ElMessage.success(`已将《${book.title}》添加到收藏`)
        },

        // 最新图书相关
        viewMoreLatest() {
            ElMessage.info('查看更多最新图书')
        }
    }
}
</script>

<style scoped>
.home-container {
    min-height: 100vh;
    background-color: #f5f7fa;
}

.header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 20px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icon {
    font-size: 24px;
}

.logo h2 {
    margin: 0;
    font-weight: 600;
}

.search-section {
    flex: 1;
    max-width: 600px;
    margin: 0 40px;
}

.search-input {
    width: 100%;
}

.user-section {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-avatar {
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.main-content {
    padding: 20px;
}

.category-section,
.recommend-section,
.latest-section {
    margin-bottom: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-card,
.recommend-card,
.latest-card {
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.category-item {
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    border-radius: 8px;
}

.category-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.category-icon {
    font-size: 32px;
    margin-bottom: 10px;
    color: #409eff;
}

.category-name {
    font-weight: 600;
    margin-bottom: 5px;
}

.category-count {
    color: #909399;
    font-size: 12px;
}

.book-card {
    cursor: pointer;
    transition: all 0.3s;
    border-radius: 8px;
    overflow: hidden;
}

.book-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.book-cover {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 4px;
}

.book-info {
    padding: 10px 0;
}

.book-title {
    margin: 0 0 5px 0;
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.book-author {
    margin: 0 0 10px 0;
    color: #909399;
    font-size: 12px;
}

.book-rating {
    margin-bottom: 10px;
}

.book-title-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.book-cover-small {
    width: 40px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
}

/* 分类图标颜色 */
.literature { color: #e6a23c; }
.tech { color: #409eff; }
.history { color: #f56c6c; }
.art { color: #67c23a; }
.business { color: #909399; }
.philosophy { color: #9c27b0; }

/* 响应式设计 */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        gap: 15px;
        padding: 10px;
    }
    
    .search-section {
        margin: 0;
        max-width: 100%;
    }
    
    .category-item {
        margin-bottom: 10px;
    }
}
</style>